<template>
  <el-input
    v-if="maxLength != 0"
    v-model="val"
    :type="pwShow ? 'text' : 'password'"
    :class="{'require':getRequire && isNull()}"
    size="small"
    :disabled="disabled"
    :minlength="minLength"
    :maxlength="maxLength"
    show-word-limit
    :suffix-icon="pwShow ? 'el-icon-key' : 'el-icon-view'"
    @input="input"
    @click.native="showPw"
  />
  <el-input
    v-else
    v-model="val"
    :type="pwShow ? 'text' : 'password'"
    :class="{'require':getRequire && isNull()}"
    size="small"
    :disabled="disabled"
    :minlength="minLength"
    show-word-limit
    :suffix-icon="pwShow ? 'el-icon-key' : 'el-icon-view'"
    @input="input"
    @click.native="showPw"
  />
</template>

<script>
export default {
  name: 'IkTablePassword',
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    minLength: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 0
    },
    showPassword: {
      type: Boolean,
      default: false
    },
    tips: {
      type: String,
      default: ''
    },
    require: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      val: '',
      pwShow: false
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '') {
          this.val = value
        } else {
          this.val = this.defaultValue
          this.$emit('input', value)
        }
        this.$emit('onFieldChange', this.line, this.code, oldValue, value)
      },
      immediate: true
    }
  },
  methods: {
    input(value) {
      // 取值验证
      // v-model实现触发方法
      this.$emit('input', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    showPw() {
      this.pwShow = !this.pwShow
    },
    reset() {
      this.value = this.defaultValue
    },
    clean() {
      this.value = ''
    }
  }
}
</script>
<style scoped>
::v-deep.require{
    border: red 1px solid;
}
</style>
<style lang="scss" >
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}
.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
